<template>
    <view class="gjl-view">
        <view class="main">
            <view class="card">
                <view class="cover-img">
                    <image src="https://img.thumbrary.com/same-month1.png" mode="" v-if="index == 1"></image>
                    <image src="https://img.thumbrary.com/same-month2.png" mode="" v-if="index == 2"></image>
                    <image src="https://img.thumbrary.com/same-month3.png" mode="" v-if="index == 3"></image>
                    <image src="https://img.thumbrary.com/same-month4.png" mode="" v-if="index == 4"></image>
                </view>
                <view class="card-inner">
                    <view class="top-box">
                        <view class="num">
                            <text class="big">{{yongjinData.DYyongjin || yongjinData.DYsaoma || yongjinData.DYdingdan || yongjinData.DYtuiguang}}</text>{{index | numFilter}}
                        </view>
                        <view class="text">
                            {{index | titleFilter}}
                        </view>
                    </view>
                </view>
            </view>
            <view class="search-box">
                <view class="left-box">
                    <view class="time-box">
                        <view class="timer">
                            <picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                                <view class="uni-input">{{date}}</view>
                            </picker>
                        </view>
                        <view class="down-arr"></view>
                    </view>
                    <view class="line"></view>
                    <view class="input-box">
                        <input class="uni-input" v-model="search" confirm-type="search" @confirm="doSearch" />
                        <view class="placeholder-box" v-if="!search">
                            {{placeholderText}}
                        </view>
                    </view>
                </view>
                <view class="click-btn" @click="doSearch">
                    查询
                </view>
            </view>
            <view class="main-center">
                <view class="blue-title">
                    推广订单
                </view>
                <view class="list-box">
                    <view class="li-box" v-for="(item,index2) in yongjinData.list" :key="index2">
                        <userList :item="item" v-if="index == 2"></userList>
                        <orderList :item="item" v-else></orderList>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import userList from './components/user-list.vue'
    import orderList from './components/order-list.vue'
    import service from "@/service"
    import utils from '@/util/index.js'

    let numFilter = {
        1: '元',
        2: '人',
        3: '单',
        4: '元'
    }
    let titleFilter = {
        1: '当月佣金',
        2: '当月扫码人',
        3: '当月订单',
        4: '当月推广金额'
    }
    let placeholderFillter = {
        1: '输入订单号',
        2: '输入昵称',
        3: '输入订单号',
        4: '输入订单号'
    }
    export default {
        components: {
            userList,
            orderList
        },
        filters: {
            titleFilter(val) {
                val = val * 1
                return titleFilter[val]
            },
            numFilter(val) {
                val = val * 1
                return numFilter[val]
            },
            format(val,format){
                return utils.format(val,format)
            }
        },
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                date: currentDate,
                search: '',
                index: 1,
                yongjinData: {},
                listQuery: {
                    page: 1,
                    limit: 10,
                    day: currentDate
                },
                placeholderText: '输入订单号'
            }
        },
        onLoad(item) {
            this.index = item.index * 1;
            let title = titleFilter[this.index];
            this.placeholderText = placeholderFillter[this.index];
            uni.setNavigationBarTitle({
                title: title
            });
            this.getData(item.index);
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        onReachBottom(){
            this.getData(this.index);
        },
        methods: {
            // 获取当月数据
            getData(type) {
                let str = 'PartnershipDYyongjin'
                if (type == 1) {
                    str = 'PartnershipDYyongjin'
                    this.listQuery.orderNum = this.search
                } else if (type == 2) {
                    str = 'PartnershipDYsaoma'
                    this.listQuery.nickName = this.search
                } else if (type == 3) {
                    str = 'PartnershipDYdingdan'
                    this.listQuery.orderNum = this.search
                } else if (type == 4) {
                    str = 'PartnershipDYtuiguang'
                    this.listQuery.orderNum = this.search
                }
                service.mineService[str]({
                    data: { ...this.listQuery
                    },
                    success: res => {
                        let list = res.result.list;
                        if (this.listQuery.page == 1) {
                            this.yongjinData = res.result;
                        } else {
                            this.yongjinData.list = this.yongjinData.list.concat(list);
                        }
                        if(list.length > 0){
                            this.listQuery.page++;
                        }
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            doSearch() {
                this.listQuery.page = 1;
                this.getData(this.index)
            },
            bindDateChange: function(e) {
                this.date = e.target.value
                this.listQuery.day = e.target.value
                this.listQuery.page = 1;
                this.getData(this.index)
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}`;
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        min-height: 100%;
        overflow: hidden;
        background: rgba(249, 249, 249, 1);

        .main {
            margin: 20rpx 30rpx 0;

            .main-center {
                margin-top: 38rpx;
                padding: 40rpx 20rpx 81rpx;
                background-color: #fff;

                .blue-title {
                    position: relative;
                    padding-left: 24rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                    color: rgba(51, 51, 51, 1);
                }

                .list-box {
                    margin-top: 24rpx;

                    .li-box+.li-box {
                        margin-top: 20rpx;
                    }

                    .li-box {
                        padding: 0 20rpx 29rpx;
                        border-bottom: 1px solid rgba(229, 229, 229, 1);
                    }
                }
            }

            .search-box {
                position: relative;
                z-index: 3;
                margin: -28rpx 17rpx 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 80rpx;

                .left-box {
                    background-color: #fff;
                    border-radius: 8rpx;
                    height: 100%;
                    display: flex;
                    align-items: center;

                    .line {
                        height: 54rpx;
                        width: 1px;
                        background: rgba(229, 229, 229, 1);
                    }

                    .time-box {
                        padding: 0 22rpx 0 15rpx;
                        display: flex;
                        align-items: center;

                        .timer {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                        }

                        .down-arr {
                            margin-left: 12rpx;
                            width: 0;
                            height: 0;
                            border-left: 10rpx solid transparent;
                            border-right: 10rpx solid transparent;
                            border-top: 18rpx solid #C9C9C9;
                        }
                    }

                    .input-box {
                        box-sizing: border-box;
                        width: 297rpx;
                        padding: 0 20rpx;
                        height: 100%;
                        position: relative;
                        display: flex;
                        align-items: center;

                        .placeholder-box {
                            line-height: 80rpx;
                            text-align: center;
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                            height: 100%;
                            width: calc(100% - 40rpx);
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }
                }

                .click-btn {
                    line-height: 80rpx;
                    height: 100%;
                    padding: 0rpx 57rpx;
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.06);
                    border-radius: 8rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(43, 168, 252, 1);
                }
            }

            .card {
                position: relative;
                height: 279rpx;
                width: 100%;

                .cover-img {
                    z-index: 1;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;

                    image {
                        height: 100%;
                        width: 100%;
                        border-radius: 10rpx;
                    }
                }

                .card-inner {
                    z-index: 2;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;

                    .top-box {
                        margin-left: 85rpx;
                        margin-top: 67rpx;

                        .text {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                        }

                        .num {
                            font-size: 24rpx;
                            font-weight: bold;
                            color: rgba(255, 255, 255, 1);

                            .big {
                                font-size: 48rpx;
                            }
                        }
                    }
                }

            }
        }
    }
</style>
